<template>
  <Drawer
    width="40%"
    title="订阅详情"
    placement="right"
    v-model:visible="visible"
    :footer-style="{ textAlign: 'right' }"
    @close="close"
  >
    <template #closeIcon>
      <ArrowLeftOutlined />
    </template>

    <Form :model="formState" v-bind="formItemLayout">
      <FormItem label="应用名称" name="name"> {{ formState.name }} </FormItem>
      <FormItem v-if="formState.tenantAppCode" label="租户应用编码">
        {{ formState.tenantAppCode }}
      </FormItem>
      <FormItem
        v-if="formState.appPackage && formState.appPackage.type && formState.appPackage.enterpriseSize"
        label="套餐类型"
      >
        {{ formState.appPackage.type + ' 适用于' + formState.appPackage.enterpriseSize + '企业' }}
      </FormItem>
      <FormItem v-if="formState.appPackage && formState.appPackage.appMultiTenantMode" label="应用多租模式">
        {{ formState.appPackage.appMultiTenantMode }}
      </FormItem>
      <FormItem v-if="formState.appPackage && formState.appPackage.dbMultiTenantMode" label="数据库多租模式">
        {{ formState.appPackage.dbMultiTenantMode }}
      </FormItem>
      <FormItem v-if="formState.paymentTypeStr" label="付费类型">
        {{ formState.paymentTypeStr }}
      </FormItem>
      <FormItem v-if="formState.effectiveTime" label="生效时间">
        {{ formState.effectiveTime }}
      </FormItem>
      <FormItem v-if="formState.expireTime" label="过期时间">
        {{ formState.expireTime }}
      </FormItem>
      <FormItem v-if="formState.statusDesc" label="状态">
        {{ formState.statusDesc }}
      </FormItem>
      <FormItem v-if="formState.source" label="来源">
        {{ formState.source }}
      </FormItem>
    </Form>
  </Drawer>
</template>
<script lang="ts" setup>
import { Drawer, Form, FormItem } from 'ant-design-vue';
import { ref } from 'vue';
import { ArrowLeftOutlined } from '@ant-design/icons-vue';
import { DetailItem } from '/@/api/system-mgmt/tenant-app-mgmt/model/tenantAppModel';
import { getSubscribeDetail } from '/@/api/system-mgmt/tenant-app-mgmt/tenantApp';
const visible = ref(false);
let formState = ref({} as DetailItem);
const openDetail = async (record) => {
  visible.value = true;
  formState.value = await getSubscribeDetail(record.appId);
};

const close = () => {
  visible.value = false;
  formState.value = {} as DetailItem;
};
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 14 },
};
defineExpose({ openDetail });
</script>
